在nginx上vue3.0项目的部署和踩坑
1.首先进入项目根目录,打包:npm run build2.出现dist文件夹3.进入服务器,nginx/html路径下,清空html文件夹下的两个文件。4.上传dist文件夹,复制dist文件夹中的所有内容到html文件夹中。5.修改nginx的配置文件(conf/nginx.conf)location / {root ht...
·
1.首先进入项目根目录,打包:
npm run build
2.出现dist文件夹
3.进入服务器,nginx/html路径下,清空html文件夹下的两个文件。
4.上传dist文件夹,复制dist文件夹中的所有内容到html文件夹中。
5.修改nginx的配置文件(conf/nginx.conf)
location / {
root html;
index index.html index.htm;
}
出现问题
- 路由失效。
解决:在项目根路径下添加配置文件const path = require('path'); module.exports = { // 基本路径 baseUrl: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, chainWebpack: () => {}, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production'; } else { // 为开发环境修改配置... config.mode = 'development'; } Object.assign(config, { // 开发生产共同配置 resolve: { alias: { '@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components') } } }); }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: true, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相关配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8081, https: false, hotOnly: false, // proxy: { // // 设置代理 // // proxy all requests starting with /api to jsonplaceholder // 'http://localhost:8080/': { // target: 'http://baidu.com:8080', //真实请求的目标地址 // changeOrigin: true, // pathRewrite: { // '^http://localhost:8080/': '' // } // } // }, before: (app) => {} }, // 第三方插件配置 pluginOptions: { // ... } };
- 页面刷新404。
添加一条nginx配置 try_files $uri $uri/ /index.html last;
修改后如下:location / { root html; try_files $uri $uri/ /index.html last; index index.html index.htm; }
更多推荐
已为社区贡献2条内容
所有评论(0)