1. 页面URL中 井 号处理
使用 vue-cli 生成的项目模板，运行时在url地址栏多一个#号，服务器部署后会出现 www.example.com/#/ 的情况
解决方案：
修改 src/router/index.js 文件，修改 vue-router 模式为 history ，设置 bash url效果正常了
vue-router 官网：router.vuejs.org/zh-cn/essen…
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/' }
