- A+
所属分类:Web前端
vue配置
注:由于项目里使用的是老版本的vue-cli
,新版本@vue/cli
配置会在旁说明。
项目config配置
老版本的配置文件在config/index.js
中,如果是cli 3.x
后续版本,需在项目 (和 package.json 同级的) 根目录中创建vue.config.js
文件进行配置。
const path = require('path'); module.exports = { module.exports = { build: { // 指定生成的 index.html 的输出路径 (相对于 配置文件所在路径)。也可以是一个绝对路径。 // 新版本使用:indexPath index: path.resolve(__dirname, '../flytree/index.html'), // 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。 // 新版本使用:outputDir assetsRoot: path.resolve(__dirname, '../flytree'), // 指定除了index.html外的静态资源的目录 // 新版本使用:assetsDir assetsSubDirectory: 'public', // 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。 // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径 // 如我在index.html中应用了张在pulblic下的图片flytree.jpg // 则引用是 src='./public/flytree.jpg' // 新版本:publicPath assetsPublicPath: './', } } }
配置以后bulid
后,部署的文件会在项目下flytree
文件下。
路由配置
如果在ngnix
代理的时候不是配置到根路径/
的话,则要配置base
,它指定的是应用的基路径。例如,如果整个单页应用服务在 /app/
下,然后 base
就应该设为 "/app/"
。
router/index.js配置:
const vueRouter = new Router({ mode: "history", base: "/flytree", routes: [] })
外部文件应用配置
如配置了assetsPublicPath
路径,如这里配置的是./
相对路径,则在发布的时候要将引用的静态资源设置在,其路径里,如:
<img src="./public/img/flytree.png" alt="nginx部署vue项目时build配置及相关指令说明"> <script> axios.get('./public/JSON/data.json') </script>
为了方便开发和发布时使用静态资源,可以:
// main.js中配置 window.base_file_url = process.env.NODE_ENV === 'production' ? '.' : '' // 使用 axios.get(base_file_url + '/public/JSON/data.json')
nginx的配置
http { include mime.types; default_type application/octet-stream; access_log logs/access.log main; sendfile on; keepalive_timeout 65; server { listen 8023; server_name localhost; location /flytree { alias F:/Program_D/work/demo/flytree/; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
如此,项目就部署在http://127.0.0.1:8023/flytree
下了。
补充说明
- 关于
try_files $uri $uri/ /index.html
的说明:
Niginx中Vue Router 历史(history)模式的配置