1. 页面URL中 井 号处理
使用 vue-cli 生成的项目模板，运行时在url地址栏多一个#号，服务器部署后会出现 www.example.com/#/ 的情况
解决方案：
修改 src/router/index.js 文件，修改 vue-router 模式为 history ，设置 bash url效果正常了
vue-router 官网：https://router.vuejs.org/zh-cn/essentials/history-mode.html
2. 服务器部署 vue 子模块项目
有一个项目地址为 www.example.com ，这个项目下又添加了一个子模块，子模块是单独的一个项目，域名效果变成 www.example.com/sk 的形式访问子模块项目的首页，通过 www.example.com/sk/home 的方式访问子模块项目路由页面
解决方案：
第一步：修改 src/router/index.js 文件中 router 的 bash 配置，效果如下
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/sk',
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
第二步：修改 npm run build 命令打包生成的目录结构。打开前端项目根目录下 /config/index.js 文件,打包的默认路径为生成 dist 静态文件目录，默认路径配置如下
...
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
修改打包路径配置，静态文件目录下添加一个 sk 子目录，其他打包文件放到 sk 目录下，注意目录中的 / ， 前端项目中的配置完成了
...
build: {
index: path.resolve(__dirname, '../dist/sk/index.html'),
assetsRoot: path.resolve(__dirname, '../dist/sk'),
assetsSubDirectory: 'static',
assetsPublicPath: '/sk/',
...
第三步：修改 dev 属性下的 assetsPublicPath 路径配置，由原来的 / 修改为 /sk/
...
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/sk/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
...
第四步：修改服务器 nginx 的配置，设置 sk 路径访问内容，配置如下
...
server {
listen 80;
server_name example.com;
location / {
try_files $uri /index.html;
root /xxx/projects/example/frontend/dist;
}
location /sk {
try_files $uri /sk/index.html;
alias /xxx/projects/example-sk/frontend/dist/sk;
}
}
...
3. 本地npm run dev正常，服务端运行出错, 出现 www.xxx.com/xx 域名地址下页面空白,控制台出错,资源文件看似正常的情况,如下效果
config/index.js 配置文件如下
'use strict'
// Template version: 1.1.3
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
const env = '"' + process.env.NODE_ENV + '"'
console.log(process.env.NODE_ENV)
module.exports = {
build: {
env: env,
index: path.resolve(__dirname, '../dist/admin/index.html'),
assetsRoot: path.resolve(__dirname, '../dist/admin'),
assetsSubDirectory: 'static',
assetsPublicPath: '/admin/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8081,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
dev 属性下的 assetsPublicPath: '/', 属性问题，根据实际情况调整,这里调整为 assetsPublicPath: '/admin',, 重新发布部署项目即可
VueCli 3.0 + 以后配置在 vue.config.js 中修改
$ vue --version
3.11.0
vue.config.js 配置如下
module.exports = {
outputDir: 'dist/admin/'
}
